<template>
  <div class="searchlist">
    <!-- 导航式搜索就点点页面 -->
    <div class="searchlist-item">
      <div class="search-box">
        <label for="hotels-destination">目的地</label>
        <!-- 标签for属性，与表单进行绑定 -->
        <input type="text" id="hotels-destination" placeholder="北京" v-model="select.city">
      </div>
    </div>

    <div class="searchlist-item">
      <div class="search-box">
        <label>入住时间/退房时间</label>
        <el-date-picker v-model="select.hotelTime" type="daterange" start-placeholder="入住日期" end-placeholder="退房日期"
          :default-time="[new Date(2024, 3, 1), new Date(2024, 4, 1)]" />
      </div>
    </div>

    <div class="searchlist-item">
      <div class="search-box">
        <label for="room-guest">房间/入住人数</label>
        <input type="text" id="room-guest" placeholder="1间/1位" v-model="select.number">
      </div>
    </div>

    <div class="searchlist-item">
      <div class="search-box">
        <label for="keyword">关健词（选填）</label>
        <input type="text" id="keyword" placeholder="火车站/酒店名称或区域" v-model="select.nameOrTransport">
      </div>
    </div>

    <div class="searchlist-item">
      <el-button type="primary" :icon="Search" @click="throttle(select_hotal)" id="button"></el-button>
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import Link from "../api/Link.js";
import apiurl from "../api/url.js";
import { ElMessage } from 'element-plus'

//pinia本地化存储用户信息
import { Hotaldata } from "../store/Hotaldata.js";
import { storeToRefs } from "pinia";
const hotaldata = Hotaldata();
let { a_recommendlist, } = storeToRefs(hotaldata)
let select = ref(
  {
    city: null,
    hotelTime: null,
    number: null,
    nameOrTransport: null
  }
)
hotaldata.Select_storeData = select.value
console.log("piania", hotaldata.Select_storeData);

//查询功能
const select_hotal = () => {
  //发送的查询数据
  let select_data = {
    city: select.value.city,  //酒店城市
    hotelTime: select.value.hotelTime,     //入住时间
    number: select.value.number,       //入住人数
    nameOrTransport: select.value.nameOrTransport       //位置区域或酒店名称
  }
  ElMessage({
    showClose: true,
    message: '请稍等，正在查询...',
    type: 'success',
  })
  const message = document.querySelector('.el-message__content')?.parentNode
  //判断提示框的数量   
  if (document.getElementsByClassName('el-message__content').length > 1) {
    setTimeout(function () {
      message.parentNode.removeChild(message);
    }, 100)
  }
  //查询请求
  console.log(select_data);
  console.log("select", hotaldata.Select_storeData);
  Link(apiurl.hotalList, "POST", select_data).then((ok: any) => {
    console.log(ok);
    // 搜索的酒店信息放到pinia本地存储
    a_recommendlist.value = ok
    hotaldata.select_state = true
    if (ok.length == 0) {
      ElMessage({
        showClose: true,
        message: '抱歉，暂无符合条件的酒店...',
        type: 'error',
      })
    }
  })
}

// 定义一个标志
let canRun = ref(false);
//节流函数，接受参数为目标函数和延迟时长
const throttle = (fn: any) => {
  if (!canRun.value) {
    fn();
    canRun.value = true
    setTimeout(function () {
      canRun.value = false;
    }, 5000)
  } else {
    return
  }
};
</script>

<style lang="scss" scoped>
.searchlist {
  width: 1200px;
  display: flex;
  /* 网格布局 */
  grid-template-columns: repeat(5, auto);
  background-image: url("http://101.42.51.171:9000/smart/image/main_background01.jpg");
  background-size: cover;
  background-position: center 80%;
  background-repeat: no-repeat;
  z-index: -1;
  border-radius: 15px;
}

.searchlist-item {
  margin-left: -1px;
  margin-right: 5px;
  border-radius: 15px;
}

.search-box {
  padding: 8px 12px;

}

.search-box label {
  color: black;
  display: block;
}

.search-box input {
  border: none;
  font-size: 16px;
  font-weight: 700;
  padding-top: 10px;
  padding-left: 10px;
  border-radius: 15px;
}

/* 当元素获得焦点时，能够控制父元素的样式，类似冒泡事件 */


.el-date-editor.el-input__wrapper {
  box-shadow: none;
}

.el-date-editor.el-input__wrapper:hover {
  box-shadow: none;
}

.searchlist-item .el-button {
  width: 25px;
  height: 35px;
  border-radius: 15px;
  background: linear-gradient(to left, #0076f5 0%, #00a7fa 100%);
  margin-top: 20px;
  margin-left: 15px;
}

.searchlist-item .el-button .el-icon {
  font-size: 20px;
}
</style>
